import React, { useEffect, useState } from "react";
import Router, { withRouter } from '@/router/renderRouter';
import './index.scss';
import { 
  homeTransData,
} from '@/api/api'

// Component
import { Chart, Line, Point, Tooltip, Legend } from 'bizcharts';

const MemberDataCharts = (props) => {
  const [loading, setLoading] = useState(false)
  const [dataSource, setDataSource] = useState([]);
  // 数据源
  const scale = {
  	temperature: {},
  	type: {
  		formatter: v => {
  			return {
  				darwAmount: '支出金额',
  				rechargeAmount: '收入金额',
  				fee: '手续费',
  			}[v]
  		}
  	}
  }
  
  const getHomeTransData = async () => {
    try {
      setLoading(true)
      let res = await homeTransData()
      if(res.code === 0) {
        let newSource = []
        res.data.forEach(item=>{
          for (let key in item) {
            let obj = {}
            if(key !== 'countMonth'){
              obj ={
              	month: item.countMonth,
              	type: key,
              	temperature: item[key]
              }
              newSource.push(obj)
            }
          }
        })
        setDataSource(newSource)
      }
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  }
  
  // 首次更新
  useEffect(() => {
    getHomeTransData()
    return () => { 
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  } , [])
  
  
  return (
    <>
      <Chart scale={scale} padding={[30, 20, 60, 60]} autoFit height={400} data={dataSource} interactions={['element-active']}>
        <Point position="month*temperature" color="type" shape='circle' />
        <Line shape="smooth" position="month*temperature" color="type" label="temperature" />
        <Tooltip shared showCrosshairs region={null} g2-tooltip-list-item={{display:'flex'}}/>
        <Legend background={{
          style: {
            stroke: '#fff'
          }
        }} />
      </Chart>
    </>
  )
}
export default withRouter(MemberDataCharts)